<!DOCTYPE html>
<html>

<head>
    <title>首页 {$site_info.site_name|default=''}</title>
    <meta name="keywords" content="{$site_info.site_seo_keywords|default=''}" />
    <meta name="description" content="{$site_info.site_seo_description|default=''}">
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <include file="public@head" />
    <link href="__TMPL__/public/assets/css/slippry/slippry.css" rel="stylesheet"> 
    <link rel="stylesheet" href="__TMPL__/public/assets/swiper/swiper-bundle.min.css">   
    <widgetsHead />
    <hook name="before_head_end" />
</head>
<php>
    $json = json_encode($theme_vars['exhibitionlist'], true);
    $rangeOfExhibit = json_encode($theme_vars['rangeOfExhibits'], true);
    $activityList = json_encode($theme_vars['activityList'], true);
    $cid = $theme_vars['varcid']
</php>
<body class="body-white" id="#app">
    
    <include file="public@nav" />
    <widgetsBlock tag="div" name="main" class="test" />
    <div id="app">
         <!-- 展会信息 -->
        <div class="indexContent" >
            <div class="left" style="margin-top:5.208vw">
                <div class="boxTitle">
                    <div class="fontTitle" style="font-size:2.188vw;">展会信息</div>
                    <div  class="fontTitle" style="font-size:1.146vw;">EXHIBITION</div>
                    <div class="colorBox"></div>
                </div>
                <div class="exhibitionCardBox">
                    <volist name="theme_vars.exhibitionlist" id="vo">
                        <div class="exhibitionCard" :class="current == '{$vo.id}'?'checkexhibitionCard':''"  @click="hover('{$vo.id}')">
                            <img style="width:100%;height: 17vh;border-radius: 0.521vw 0.521vw 0 0;" src="http://{$theme_vars.https}/upload/{$vo.image}" alt="">
                            <div style="padding: 0.9vw;">  
                                <p class="title">时间：{$vo.time}</p>
                                <p class="content">地点：{$vo.local}</p>
                                <div class="btnBoxs">
                                    <div class="btn" style="margin-right: 1.042vw;">
                                        <a href="{$theme_vars.exurl}" style="color: #FFF;text-decoration: none;">
                                            报名参展
                                        </a>
                                    </div>
                                    <div class="btn" style="background-color: #2da0bd;margin-left: 1.875vw">
                                        <a href="{$theme_vars.visiturl}" style="color: #FFF;text-decoration: none;">
                                            报名参观
                                        </a>
                                    </div>
                                    
                                </div>
                            </div> 
                        </div>
                    </volist>
                </div>
                
            </div>
        </div>
        <div class="show">
            <div class="exInfo" :style="`--show-right:`+triangleRight">
                <div class="tabs" v-for="item,index in items" :key="index">
                        <p class="num">{{item.split("-")[0]}}</p>
                        <p class="name">{{item.split("-")[1]}}</p>
                </div>
                
            </div>
            <div class="content">
                {{info}}
            </div>
            <div class="infoBtn">
                <a href="http://{$theme_vars.https}/aboutExhibition.html" style="color:#FFF;text-decoration: none;">
                    了解更多
                </a>
            </div>
        </div>
         <!-- 展品范围  精彩活动 -->
        <div class="indexContent">  
            <div class="left">
                    <div class="boxTitle">
                        <div class="fontTitle" style="font-size:2.188vw;">展品范围</div>
                        <div  class="fontTitle" style="font-size:1.146vw;">EXHIBITION SCOPE</div>
                        <div class="colorBox"></div>
                    </div>
                    <div class="scopeBox">
                        <div class="box1">
                            <div class="scopeTitle">{{rangeOfExhibitsList[0].title||'未上传'}}</div>
                            <image
                                :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[0].varImage"
                                mode="scaleToFill"
                            />
                        </div>
                        <div>
                            <div class="upBox">
                                <div class="box2">
                                    <div class="scopeTitle">{{rangeOfExhibitsList[1].title||'未上传'}}</div>
                                    <image
                                        :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[1].varImage"
                                        mode="scaleToFill"
                                    
                                    />
                                </div>
                                <div class="box2">
                                    <div class="scopeTitle">{{rangeOfExhibitsList[2].title||'未上传'}}</div>
                                    <image
                                        :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[2].varImage"
                                        mode="scaleToFill"
                                    />
                                </div>
                                <div class="box2" style="margin-right: 0;">
                                    <div class="scopeTitle">{{rangeOfExhibitsList[3].title||'未上传'}}</div>
                                    <image
                                        :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[3].varImage"
                                        mode="scaleToFill"
                                    />
                                </div>
                            </div>
                            <div class="downBox">
                                <div class="box3">
                                    <div class="scopeTitle">{{rangeOfExhibitsList[4].title||'未上传'}}</div>
                                    <image
                                        :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[4].varImage"
                                        mode="scaleToFill"
                                    />
                                </div>
                                <div class="box4">
                                    <div class="scopeTitle">{{rangeOfExhibitsList[5].title||'未上传'}}</div>
                                    <image
                                        :src="`http://{$theme_vars.https}/upload/`+rangeOfExhibitsList[5].varImage"
                                        mode="scaleToFill"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
            </div>
            <!-- 精彩活动 -->
            <div style="background-color: #F8F8F8;width: 100%;padding-top:7.292vw;margin-top: 2.604vw;">
                <div class="left"  style="margin-top: 0;">
                    <div class="boxTitle" style="margin-bottom: 4.167vw;">
                        <div class="fontTitle" style="font-size:2.188vw;">精彩活动</div>
                        <div  class="fontTitle" style="font-size:1.146vw;">ACTIVITIES</div>
                        <div class="colorBox"></div>
                    </div>
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                          
                                <div class="swiper-slide" v-for="item,index in activityList" :key="index">
                                    <!-- <a style="color:#FFF;text-decoration: none;" :title="{{item.title}}" href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}"> -->

                                    <div class="activityBox" @mouseenter="handlemouseenter(index)" @mouseleave ="handlemouseleave()">
                                      
                                        <div class="image">
                                            <image
                                            :src="`http://{$theme_vars.https}/upload/`+ item.varImage"
                                            mode="scaleToFill"
                                            />
                                        </div>
                                        <div class="actName">{{item.title}}</div>
                                        <!-- <span class="mask" :style="acCurrent ==index?'background:rgba(255,145,60,0.5)':''">
                                            <div  v-if="acCurrent == index">
                                                
                                                    <p style="color: #FFF;font-size: 1.25vw;font-weight: 600;">{{item.title}}</p>
                                                    <div style="color: #FFF;border-radius: 2.604vw;border: 1px solid #FFF;padding: 0.26vw 0.521vw;">了解更多</div>
                                                
                                            </div>
                                        </span> -->
                                       </div>
                                    <!-- </a> -->
                                    </div>
                          
                        </div>
                        
                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div> 
                <div class="activityVideo">
                    <div @click="playVideo = true">
                        <img src="http://{$theme_vars.https}/upload/{$theme_vars.videoImg}" alt="">
                    </div>
                </div>
            </div>
        </div>
         <!-- 展会新闻 -->
        <div class="indexContent">
            <div class="left">
                <div class="boxTitle">
                    <div class="fontTitle" style="font-size:2.188vw;">展会新闻</div>
                    <div  class="fontTitle" style="font-size:1.146vw;">NEWS</div>
                    <div class="colorBox"></div>
                </div>
            <div style="display: flex;justify-content: flex-start;margin-top: 4.167vw;">
                <portal:articles limit="1" order="id" categoryIds="$cid" order="post.update_time DESC">
                    <a class="newsBoxa" title="{$vo.post_title}" href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}">
                        <div class="oneNews">
                            <image
                                src="http://{$theme_vars.https}/upload/{$vo.thumbnail}"
                                mode="scaleToFill"
                            />
                            <span class="bottomTitle">{$vo.post_title}</span>
                        </div>
                    </a>
                </portal:articles>
                <ul class="exNews">
                <portal:articles limit="3" order="id" categoryIds="1" order="post.update_time DESC">
                    <a class="newsBoxa" title="{$vo.post_title}" href="{:cmf_url('portal/Article/index',array('id'=>$vo['id']))}">
                        <li class="newsBox">
                            <p class="newsTitle">{$vo.post_title}</p>
                            <p class="info"><span>{{changeTime("{$vo.create_time}")}}</span><span>查看更多»</span></p>
                        </li>
                    </a>
                </portal:articles>
                </ul>
            </div>
            <div class="moreNews">
                <a href="http://{$theme_vars.https}/News.html" style="color:#FFF;text-decoration: none;">
                        更多新闻
                </a>
            </div>
            </div>
        </div>
        <div v-if="playVideo" class="showVideo">
            <header class="closeVideo" >
               <img src="__TMPL__/public/assets/images/close.png"  alt="" @click="playVideo = false"> 
            </header>
            <video 
                src="{$theme_vars.videoSrc | default='https://cdn.qdhaiming.com/wp-content/uploads/2020/12/海名集团宣传片2019-中文_x264_x264.mp4'}" 
                width="50%" 
                height='55%'
                controls>
            </video>
        </div>
    </div>
    <include file="public@footer" />
    <include file="public@scripts" />
    
    <widgetsScript />

</body>

</html>
<script src="__TMPL__/public/assets/js/vue.js"></script>
<script src="__TMPL__/public/assets/swiper/swiper-bundle.min.js"></script>
<script>
    const app = new Vue({
    el: '#app',
    data() {
        return {
            items: [],
            info:"",
            current:1,
            list:[],
            rangeOfExhibitsList :[],
            acCurrent:-1,
            activityList:[],
            playVideo:false,
            triangleRight:'48.5vw',
        };
        },
        created(){
            this.list = JSON.parse('{$json}')
            this.info = this.list[0].info
            this.items = this.list[0].data.split(",")
            this.rangeOfExhibitsList = JSON.parse('{$rangeOfExhibit}')
            this.activityList = JSON.parse('{$activityList}')
           
        },
        mounted() {
            window.addEventListener('keydown', (e) => {
                if (e.keyCode === 27) {
                // 触发事件
                this.playVideo = false;//关闭视频
                }
            });
            },
        methods: {
            showClick(id){
                console.log(id)
            },
            hover(id) {
                this.current = id
                this.info = this.list[id-1].info
                this.items = this.list[id-1].data.split(",")
            },
            chick(e) {
                 console.log(JSON.parse(e))
            },
            changeTime(time){
                const timestamp = Number(time)
                const dateObj = new Date(timestamp*1000); 
                const year = String(dateObj.getFullYear()); // 获取年份
                const month = String(dateObj.getMonth() + 1).padStart(2, "0"); // 获取月份，并补零
                const day = String(dateObj.getDate()).padStart(2, "0"); // 获取日期，并补零
                
                return year + "-" + month + "-" + day; // 返回转换后的日期格式
            },
            handlemouseenter(item){
                console.log(item,this)
                this.acCurrent = item
            },
            handlemouseleave(item){
                this.acCurrent = -1
            }
           
        }
    });
    var mySwiper = new Swiper ('.swiper', {
                slidesPerView: 4,
                spaceBetween: 30,
                // 如果需要前进后退按钮
                navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
                },
                
        }) 
       
    $(function () {
        $("#right-slider").slippry({
            transition: 'fade',
            useCSS: true,
            captions: false,
            speed: 1000,
            pause: 3000,
            auto: true,
            preload: 'visible'
        });
        $("#right-slider").show();
    });
   
</script>
<style>
  
    .swiper {
        width: 100%;
        height: 20.833vw;
      }

    .swiper-slide {
    text-align: center;
    font-size: 0.938vw;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: flex-start;
    -ms-flex-align: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    }
    .swiper-button-next{
    right: 0.26vw;
  
    }
    .swiper-button-next::after{
        font-size: 2.292vw;
    }
    .swiper-button-prev{
    left: 0.26vw;
    }
    .swiper-button-prev::after{
        font-size: 2.292vw;
    }
    .swiper-button-next, .swiper-button-prev{
    top: 7.031vw;
    background-color: rgba(0, 0, 0, 0.35);
    color: #FFF;
    height: 5.208vw;
    width: 2.604vw;
    }
    body{
        width: 100vw;
        overflow-x: hidden;
        
    }
    /* 轮播图样式 */
    .test {
        height: 36.458vw;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .test .sy-box .sy-slides-wrap .sy-slides-crop .sy-list li a img{
        height: 36.458vw;
    }
    .test .sy-box {
        height: 36.458vw;
        width: 100vw;
    }
    .sy-pager{
        display: none !important;
    }
    .sy-box {
        height: 36.458vw;
    }

    /* 首页元素总盒子 */
   
    .indexContent .left {
        color: black;
        width: 62.5vw;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 7.292vw;
    }

    /* 标题样式 */
    .boxTitle{
        position: relative;
    }
    .boxTitle .colorBox{
        position: absolute;
        background: #FFC89D;
        width: 10.417vw;
        top: 42%;
        height: 1.458vw;
        left :41.6%;
        z-index: 0;
    }
    .boxTitle .fontTitle{
        text-align: center;
        position: relative;
        z-index: 10;
    }
    /* 展会信息下卡片列表 */
    .exhibitionCardBox{
        display: flex;
        justify-content: space-between;
        position: relative;
        overflow-x:scroll;
        overflow-y:hidden;
    }
    .exhibitionCardBox::-webkit-scrollbar {
        display: none; /* 对于Webkit浏览器隐藏滚动条 */
    }

    .exhibitionCardBox {
        -ms-overflow-style: none; /* 对于IE和Edge隐藏滚动条 */
    }

    .exhibitionCardBox .exhibitionCard{
        width: 29.688vw;
        height: auto;
        margin: 4.167vw 0 2.604vw 0;
        border-radius: 0.521vw;
        box-shadow: 0 0 0.521vw 0 rgb(0 0 0 / 10%);
        cursor: pointer;
      
    }
    .exhibitionCardBox .checkexhibitionCard {
        width: 29.688vw;
        box-shadow: 0 0 0.521vw 0 rgb(0 0 0 / 30%);
        transition-property: box-shadow;
        position: relative;
        transition-duration: 0.5s;
    }
    .exhibitionCardBox .exhibitionCard .title{
        font-size: 0.938vw;    
    }
    .exhibitionCardBox .exhibitionCard .content{
        font-size: 0.938vw;
    }
    .exhibitionCardBox .exhibitionCard .btnBoxs{
        margin-top: 1.042vw;
        display: flex;
        justify-content: center;
    }
    .exhibitionCardBox .exhibitionCard .btnBoxs .btn{
        color: #FFF;
        padding: 0.313vw 0.729vw;
    }
    /* 展会信息下卡片内容 */
    .show{
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #F8F8F8;
        padding: 2.604vw 0;
        position: relative; /* 正常看你的需求是否要绝对定位还是相对定位 */
        width: 100%;

    }
    .checkexhibitionCard::after{
        content: ' ';
        background-color: #FFFFFF00;
        position: absolute;
        border:3.646vw solid transparent;
        width: 0;
        height: 0;
        z-index: 0;
        /* 三角形箭头在上 */
        border-bottom-color: #F8F8F8;
        right:38%;
        bottom: -4.427vw;              
    }
    .show .content{
        font-size: 0.833vw;
        line-height: 1.833vw;
        margin-top: 2.5vw;
        width: 62.5vw;
    }
    .show .infoBtn{
        text-align: center;
        padding: 0.417vw 2.292vw;
        color: #FFF;
        border-radius: 2.604vw;
        font-size: 0.938vw;
        background-color: #FF913C;
        margin-top: 2.604vw;
       
    }
    .exInfo{
        display: flex;
        justify-content: space-between;
        width: 62.5vw;
    }
    .exInfo .tabs{
        
        text-align: center;
    }   
    .exInfo .tabs .num{
        font-weight: 700;
        font-size:3.125vw ;
        margin: 0;
    }
    .exInfo .tabs .name{
        font-size:1.25vw ;
    }
    /* 产品范围 */
    .scopeBox{
        display: flex;
        justify-content: center;
        height: 22.396vw;
        width: 100%;
        margin-top: 4.167vw;
    }
    .scopeBox .box1{
        width: 16.146vw;
        height: 100%;
        background-color: #CCC;
        margin-right: 1.042vw;
        position: relative;
    }
    .scopeBox .box1 img{
        width: 16.146vw;
        height: 100%;
    }
    .scopeBox .upBox{
        display: flex;
        height: 9.583vw;
        margin-bottom: 1.042vw;
    }
    .scopeBox .upBox .box2{
        position: relative;
        width:14.375vw;
        height: 100%;
        margin-right: 1.042vw;
        background-color: #CCC;
    }
    .scopeBox .upBox .box2 img{
        width:14.375vw;
        height: 100%;
    }
    .scopeBox .downBox{
        display: flex;
        height: 11.51vw;
    }
    .scopeBox .downBox .box3{
        position: relative;
        width:18.229vw;
        height: 100%;
        margin-right: 1.042vw;
        background-color: #CCC;
    }
    .scopeBox .downBox .box3 img{
        width:18.229vw;
        height: 100%;
    }
    .scopeBox .downBox .box4{
        position: relative;
        width:26.042vw;
        height: 100%;
        background-color: #CCC;
    }
    .scopeBox .downBox .box4 img{
        width:26.042vw;
        height: 100%;
    }
    .scopeBox .scopeTitle{
        font-size: 0.833vw;
        padding: 0.417vw 0.833vw;
        background-color: #ff903ce9;
        position: absolute;
        top: 0;
        left: 0;
        color: #FFF;
    }
   /* 精彩活动 */
    .activityBox{
        position: relative; /* 设置容器为相对定位 */
       
       
    }
    .activityBox .mask {
            content: ""; /* 必需属性，表示生成一个空白的伪元素 */
            display: flex; /* 将伪元素转换为块级元素 */
            align-items: center;
            justify-content: center;
            position: absolute; /* 设置为绝对定位 */
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
           
    }
  
    .activityBox .image{
        width: 14.583vw;
        height: 16.667vw;
        background-color: #F2F2F2;
    }
    .activityBox .image img{
        width: 14.583vw;
        height: 16.667vw;
    }
    .activityBox .actName{
        text-align: center;
        font-size: 1.25vw;
        margin-top: 0.156vw;
    }
   .activityVideo{
    width: 100vw;
    height: 25vw;
    margin: 0 auto;
    background-color: #F2F2F2;
    margin-top: 4.167vw;
    cursor: pointer;
   }
   .activityVideo img{
    width: 100vw;
    height: 25vw;
   }
   .oneNews{ 
    width: 26.042vw;
    height: 15.625vw;
    margin-right: 2.865vw;
    border-radius: 0.833vw;
    overflow: hidden;
    position: relative;
    box-shadow: 0 0 0.521vw 0 rgb(0 0 0 / 15%);
    transition-property: box-shadow;
    transition-duration: 0.5s;
   }
   .oneNews img{
    width: 26.042vw;
    height: 15.625vw;
   }
   .bottomTitle{
    width: 26.042vw;
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.35);
    color: #FFF;
    padding: 0.521vw 1.042vw;
   }
   
   .exNews{
    width: 36.458vw;
   }
   .exNews .newsBoxa:focus {
        outline:none;  
        -moz-outline:none;
    }
    .exNews .newsBoxa:hover{   
        text-decoration: none; /* 取消默认的下划线 */
    }
    .newsBox {
        width: 80%;
        margin-left: 1.042vw;
        color: #666666;
    }
    .newsBox::marker {
        font-size: 1.25vw;
    }
    .newsBoxa{
        display: block;
        padding: 1.042vw;
    }
    .newsBoxa:nth-child(2) {
        background-color: #f2f2f2 !important;
       
    }
    .newsBox .newsTitle {
        font-weight: 600;
        font-size: 1.25vw;
        margin-bottom: 0;
        color: #333;
        overflow: hidden; /* 当内容超出容器范围时进行隐藏处理 */
        white-space: nowrap; /* 不换行 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
    }

    .newsBox .created_time {
        color: #adadad;
        font-size: 0.625vw;
        margin-bottom: 0.26vw;
    }

    .newsBox .info {
        margin-top: 0.521vw;
        font-size: 0.625vw;
        font-weight: 700;
        color: #ccc;
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;

    }
    .moreNews{
        text-align: center;
        padding: 0.417vw 2.292vw;
        color: #FFF;
        border-radius: 2.604vw;
        font-size: 0.938vw;
        background-color: #FF913C;
        margin: 2.604vw auto;
    }
    .showVideo{
        position: fixed;    
        height: 100%;
        width: 100%;
        z-index: 2002;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.5);
        animation: fedinout .5s;
    }
    @keyframes fedinout{
        0%{opacity: 0;}
        30%{opacity: .3}
        50%{opacity: .5}
        70%{opacity: .7}
        100%{opacity: 1;}
    }
    .showVideo .closeVideo{
        text-align: end;
        width: 41.667vw;
    }
    .showVideo .closeVideo img{
        width: 1.563vw;
        height: 1.563vw;
        margin-bottom: 1.042vw;
    }
    @media (min-width: 16.667vw) and (max-width: 39.063vw) {
       
       .indexContent {
           display: block;
       }
        .indexContent .left{
           width: 100%;
       }
       .indexContent .right {
           margin-top: 2vh;
           width: 100%;
        }
       .acNews{
           flex-direction: column;
       }
    }
</style>